<template>
	<view class="item" @click.stop="toDetail">
		<view class="u-flex u-row-around">
			<image src="/static/images/team-status-0.png" mode="widthFix" style="width: 244upx;" v-if="detail.itemStatus === 0"></image>
			<image src="/static/images/team-status-1.png" mode="widthFix" style="width: 244upx;" v-if="detail.itemStatus === 1"></image>
		</view>

		<view class="u-p-24">
			<view class="u-flex u-m-b-16">
				<view class="u-content-color u-flex-1">
					队伍号
				</view>
				<view class="">
					{{detail.id}}
				</view>
			</view>
			<view class="u-flex u-m-b-16">
				<view class="u-content-color u-flex-1">
					开始时间
				</view>
				<view class="">
					{{detail.created}}
				</view>
			</view>
			<view class="u-flex">
				<view class="u-content-color u-flex-1">
					我的推荐
				</view>
				<view class="color-primary">
					{{detail.memberCount}}人
				</view>
			</view>
		</view>
		<template v-if="showTree">
			<template  v-for="floor in [floor_one,floor_two,floor_three]">
				<view class="u-flex u-row-around u-p-b-20" style="align-items: flex-start;">
					<view class="u-text-center u-flex-1" v-for="v in floor">
						
						<template v-if="v.phone">
							<view class="avatar-box u-flex u-row-center">
								<u-avatar :src="baseImgUrl + v.avatar" size="84" v-if="v.avatar"></u-avatar>
								<u-avatar :src="defaultAvatar" size="84" v-else></u-avatar>	
							</view>
							<view class="u-m-t-8">
								{{v.nickName == v.phone ? hidePhone(v.nickName) : v.nickName}}
							</view>
							<view class="u-font-24 u-m-t-8">
								{{hidePhone(v.phone)}}
							</view>
							<view class="u-font-24 u-tips-color u-m-t-8">
								{{v.created}}
							</view>
						</template>
						<template v-else>
							<view class="avatar-box-kong u-flex u-row-center">
								<u-avatar src="/static/images/icon-kongwei.png" size="92"></u-avatar>
							</view>
						</template>
					</view>
				</view>
			</template>
		</template>
	</view>
</template>
<script setup>
	import {
		ref,
		computed,
		getCurrentInstance
	} from 'vue'
	const {
		proxy,
	} = getCurrentInstance()
	const {
		baseImgUrl,
		defaultAvatar
	} = proxy
	const {
		nav,
		navLogin,
		hidePhone
	} = proxy.$util;
	const props = defineProps({
		detail: {
			type: Object,
			default: {},
		},
		showTree: {
			type: Boolean,
			default: true,
		}
	})
	const floor_one = computed(() => {
		let item = props.detail.memberList.find(v => v.memberLevel == 1);
		return [item || {}]
	})
	const floor_two = computed(() => {
		let item2 = props.detail.memberList.find(v => v.memberLevel == 2);
		let item3 = props.detail.memberList.find(v => v.memberLevel == 3);
		return [item2 || {}, item3 || {}]
	})
	const floor_three = computed(() => {
		let item4 = props.detail.memberList.find(v => v.memberLevel == 4);
		let item5 = props.detail.memberList.find(v => v.memberLevel == 5);
		let item6 = props.detail.memberList.find(v => v.memberLevel == 6);
		let item7 = props.detail.memberList.find(v => v.memberLevel == 7);
		return [
			item4 || {}, 
			item5 || {},
			item6 || {},
			item7 || {},
		]
	})
	
	
	
	const toDetail = () => {
		if (props.showTree) {
			return;
		}
		let data = {
			id: props.detail.sid
		};
		nav('/pagesSub/myTeamDetail/myTeamDetail', data)
	}
</script>

<style lang="scss" scoped>
	.item {
		position: relative;
		border-radius: 20upx;
		background: #FFFFFF;

		.avatar-box {
			width: 92upx;
			height: 92upx;
			border: 4upx solid #E88D1A;
			border-radius: 50%;
			margin: 0 auto;
		}
		.avatar-box-kong{
			width: 92upx;
			height: 92upx;
			// border: 4upx solid #E88D1A;
			border-radius: 50%;
			margin: 0 auto;
		}

	}
</style>